import React, { Component } from 'react';
import {
    View,
    StyleSheet,
    Text,
    Image,
    TextInput,
    TouchableHighlight,
    Keyboard


} from 'react-native';
import PropTypes from 'prop-types';


class SearchBar extends Component {
    constructor(props) {
        super(props);

        this.state = {
            text: '',
        }

    }

    //设置props值类型
    static propTypes = {
        placeholderStr: PropTypes.string.isRequired,
        submitSearch: PropTypes.func.isRequired,
    }

    //初始化默认值
    static defaultProps = {

        placeholderStr: '搜索',
        submitSearch: (searchText) => {
            console.log('请传入搜索方法回调---->', searchText)

        }

    }

    _onSubmintEditing = () => {
        this.props.submitSearch(this.state.text);

    }

    _onChangeText = (aText) => {
        this.setState(
            { text: aText }
        )
    }




    render() {
        return (

            <View style={styles.searchBar}>


                <View style={{ width: 16 }} />

                <View style={{
                    width: screenWidth - 70,
                    height: 33,
                    backgroundColor: '#f0f1f6',
                    borderRadius: 18,
                    alignItems: 'center',
                    flexDirection: 'row'
                }}>
                    <View style={{ width: 5 }} /><Image resizeMode="contain" style={{ width: 25, height: 15 }}
                        source={require('./search.png')} />
                    <TextInput
                        onSubmitEditing={this._onSubmintEditing}
                        underlineColorAndroid="transparent"
                        // autoFocus={true}
                        returnKeyType={'search'}
                        placeholder={this.props.placeholderStr}
                        style={{
                            width: screenWidth - 105,
                            height: 32,
                            borderColor: 'gray',
                            fontSize: 14,
                            padding: 0
                        }}
                        onChangeText={this._onChangeText}
                        value={this.state.text}
                    />

                </View>

                <TouchableHighlight
                    underlayColor={'transparent'}
                    onPress={() => {
                        this._onChangeText('');
                        Keyboard.dismiss();
                        this.props.submitSearch('');
                    }}
                    style={{ width: 54, height: 40, justifyContent: 'center', alignItems: "center" }}>
                    <Text
                        style={{ color: '#8c8b91', }}>
                        取消
                        </Text>
                </TouchableHighlight>

            </View>
        );
    }
}

const styles = StyleSheet.create({

    searchBar: {
        width: screenWidth,
        height: 40,
        backgroundColor: 'white',
        alignItems: 'center',
        flexDirection: 'row',
        borderBottomWidth: 1,
        borderBottomColor: '#e0e1e0',
    },
});


export default SearchBar;